{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <style>
        .create-btn {
            margin-bottom: 20px;
        }

        .star-btn {
            color: #999;
            font-size: 20px;
        }

        .star-btn:hover {
            color: #666;
            cursor: pointer;
        }

        .project-panel {
            width: 260px;
            margin: 0 10px;
            position: relative;
            float: left;
        }

        .project-panel .panel-body {
            color: white;
            font-size: 16px;
            height: 120px;
            text-align: center;
            vertical-align: middle;
            line-height: 90px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid create-btn">
        <!-- Button trigger modal -->
        <a id="create-project" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <i class="fa fa-plus" aria-hidden="true"></i> 新建项目
        </a>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-star" aria-hidden="true"></i> 星标项目
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-list" aria-hidden="true"></i> 我创建的项目
            </div>
            <div class="panel-body">
                <div class="row row-no-gutters">
                {% for project in projects_created %}
                    <div class="panel panel-default project-panel">
                        <div class="panel-body" style="background-color: {{ project.get_color_display }}">
                            {{ project.name }}
                        </div>
                        <div class="panel-footer">
                            <i class="fa fa-star star-btn" aria-hidden="true"></i>
                            {{ project.creator.username }}
                            <span style="float: right">
                                <i class="fa fa-user-o" aria-hidden="true"></i>
                                {{ project.join_count }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-list" aria-hidden="true"></i> 我参与的项目
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建项目</h4>
                </div>
                <div class="modal-body">
                    <form id="createForm" method="POST" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取  消</button>
                    <button id="btnCreate" type="button" class="btn btn-primary">新  建</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindCreate();
        })

        function bindCreate() {
            $('#btnCreate').click(function () {
                $.ajax({
                    url: "{% url "project_list" %}",
                    type: "POST",
                    data: $("#createForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        if(res.status){
                            // location.href = location.href;
                            location.reload();
                        }else{
                            $.each(res.error, function (k, v) {
                                $("#id_" + k).next().text(v[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}